<script lang="jsx" setup>
import {
  reactive,
  ref,
  customRef,
  nextTick,
  watch,
  computed,
  onMounted,
  onUnmounted,
  onActivated,
  getCurrentInstance,
  toRef
} from 'vue'
import lodash from 'lodash'
import { QrStream, QrCapture, QrDropzone } from 'vue3-qr-reader'

const emit = defineEmits(['scanResult'])
const offCamera = ref(true)

function onDecode(data) {
  console.log(data)
  if (data) {
    offCamera.value = false
    setTimeout(() => {
      offCamera.value = true
    }, 100)
    emit('scanResult', {
      scan: data,
      d: new Date().getTime()
    })
  }
}
// onMounted(() => {
//   setTimeout(() => {
//     const constraints = {
//       audio: false,
//       video: {
//         width: 1920,
//         height: 1080
//       }
//     }
//     let video = document.querySelector('.mirrorInversion video')
//     navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
//       video.srcObject = stream
//     })
//   }, 5000)
// })
</script>

<template>
  <div class="w-full h-full">
    <qr-stream v-if="offCamera" class="mb mirrorInversion" @decode="onDecode">
      <div style="color: red" class="frame"></div>
    </qr-stream>
  </div>
</template>

<style lang="scss" scoped>
.mirrorInversion {
  transform: rotateY(180deg);
}
</style>
